<template>
  <div class="baike">
    <div class="img">
      <img :src="imgUrl" alt="">
    </div>
    <div class="navlist">
      <ul>
        <li v-for="item in navlist" :v-key="item.id">
          <router-link :to="item.to">
            {{item.name}}
          </router-link>
        </li>
      </ul>
    </div>
    <van-divider />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      imgUrl: require('@/assets/img/baike.jpg'),
      navlist: [
        {
          name: '紫砂概述',
          to: '/baike/p1'
        },
        {
          name: '紫砂优点',
          to: '/baike/p2'
        },
        {
          name: '养壶心得',
          to: '/baike/p3'
        },
        {
          name: '紫砂七老',
          to: '/baike/p4'
        },
        {
          name: '紫砂与茶',
          to: '/baike/p5'
        },
        {
          name: '茶与茶事',
          to: '/baike/p6'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.baike{
  background-color: white;
  min-height: calc(100vh - 50px);
}
.img{
  img{
    width: 100%;
    height: 200px;
  }
}
.navlist{
  a{
    display: block;
    color: black;
  }
  .router-link-exact-active {
    color: #C66C50;
    font-weight: bolder;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
    li{
      width: 32%;
      height: 36px;
      background: url(https://themes.taohuren.com/m/static/box/mingjiashouye/nav_bg.png) no-repeat center center;
      background-size: 5.8rem 2.2rem;
      float: left;
      text-align: center;
      line-height: 36px;
      margin: 10px 0;
    }
  }
}
</style>
